<template>
  <div>
    <div class="guanzhu" v-if="isload">
    <div class="follow-text">
      <p>豆果美食，会做饭很酷~</p>
      <p>你关注人的动态会出现在这</p> 

      <p>为你推荐了一些有趣的人，请关注TA们呢</p>
    </div>
    <div class="follow-box">
      <ul>
        <li v-for="(item,index) in care_list" v-bind:key="index">
          <div class="li-head">
            <div class="head-img">
              <img v-bind:src="item.u.p" alt="" />
            </div>
            <div class="person-data-box">
              <div class="data-box-top">
                  <div class="name">{{item.u.n}}</div>
                  <div class="lv">lv{{item.u.lv}}</div>
              </div>
              <div class="data-box-bottom">
                  <div class="fans">{{item.u.followers_count_text}} .</div>
                  <div class="num-foods">&nbsp;{{item.u.recipes_count_text}}</div>
              </div>
            </div>
            <div class="isfollow-box">关注</div>
          </div>
          <div class="li-content">
              <router-link :to="{path:'/detail',query:{id:item.item_id}}">
              <img v-bind:src="item.images.data_img" alt="">
              </router-link>
          </div>
          <div class="li-footer">
              <div class="li-footer-top">
                  <div class="li-collect-box">
                      <div class="collect-img">
                          <div class="img-box" v-for="citem in item.collect_users" v-bind:key="citem.id">
                              <img v-bind:src="citem.p" alt="">
                          </div>
                      </div>
                      <div class="collect-count">{{item.collect_count_text}}</div>
                  </div>

                  <div class="li-footer-icons">
                    <div class="icons-shoucang"><i class="iconfont icon-shoucang"></i></div>
                    <div class="icons-pinglun"><i class="iconfont icon-pinglun"></i></div>
                    <div class="icons-fenxiang"><i class="iconfont icon-fenxiang"></i></div>
                  </div>

              </div>
              <div class="li-footer-mid">
                  <div class="foodname">{{item.t}}</div>
              </div>
              <div class="li-footer-bottom">
                  <div class="activity"></div>
              </div>
          </div>
        </li>
        <div v-if="isshow">
          <jia-zai></jia-zai>
        </div>
      </ul>
    </div>
  </div>
  <div v-else>
    <jia-zai></jia-zai>
  </div>
  </div>
</template>

<script>
import jiaZai from '@/components/jiazai.vue'
export default {
  components:{
    jiaZai
  },
  data() {
    return {
      care_list: [],
      isload:false,
      isbottom:false,
      isshow:false,
      index:0,
      fangdou:true
    };
  },
  methods: {
    getcareList() {
      let guanzhu_list = localStorage.getItem("guanzhu_list");
      // console.log(guanzhu_list);
      if(guanzhu_list){
        //   console.log(guanzhu_list,"my-guanzhu");
        this.care_list = JSON.parse(guanzhu_list);
        //   this.care_list = JSON.parse()
        this.isload = true;
      }else{
      let url = `https://apis.netstart.cn/douguo/home/ffeeds/${this.index}/20`;
      let promise = axios.get(url);
      let _this = this;
      promise.then((res) => {
        if (res.status == "200") {
          // console.log(res.data.result.rfs);
          _this.care_list = res.data.result.rfs;
          localStorage.setItem("guanzhu_list",JSON.stringify(_this.care_list))
          // console.log(res);
          _this.isload = true;
          
        }
        // console.log(res);
      });
      }
      
    },
    regetcareList(){
      this.fangdou = false
      this.index ++;
      let url = `https://apis.netstart.cn/douguo/home/ffeeds/${this.index}/20`;
      let promise = axios.get(url);
      let _this = this;
      promise.then((res) => {
        if (res.status == "200") {
          // console.log(res.data.result.rfs);
          let a = res.data.result.rfs;
          // console.log(a);
          console.log(_this.care_list);
          if(Array.isArray(a)){
            _this.care_list = _this.care_list.concat(a);
            console.log("合并a");
            // console.log(_this.care_list,"care_list");
            
            _this.isbottom = false;
            _this.isshow = false
            setTimeout(function(){
          _this.fangdou = true
          },300)
          }

          
        }
        // console.log(res);
      });
    }
  },
  created() {
    this.getcareList();
    window.scrollTo(0,0)
  },
  mounted(){
    let _this = this;
    window.onscroll = function(){
      // 页面高度
      let a_h = document.body.scrollHeight;
      // 被卷高度
      let h = window.scrollY;
      // 浏览器可视区域高度
      let b_h = window.innerHeight;
      if(b_h + h >= a_h-10 && !this.isbottom){
        _this.isbottom = true;
        _this.isshow = true;
        if(_this.fangdou){
          _this.regetcareList();
        }
        
        console.log("到底了");
      }
      
    }
  }
};
</script>
<style lang="scss">
.guanzhu {
  padding-left: 10px;
  background-color: rgb(247, 247, 247);

  .follow-text {
    font-size: 0;
    height: 80px;
    // font-size: 12px;
    p {
      font-size: 12px;
      margin: 0;
      // font-weight: 800;
      &:nth-of-type(1) {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 5px;
      }
    }
  }

  .follow-box {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      margin-bottom: 55px;
      li {
        // height: 60px;
        // background-color: red;
        // border-bottom: 1px solid black;
        box-sizing: border-box;

        .li-head {
          height: 60px;
          position: relative;
          display: flex;
            // flex-direction: row;
            justify-content: start;
          .head-img {
            height: 60px;
            width: 50px;
            // padding-left: 10px;
            line-height: 60px;
            // padding-left: 10px;
            box-sizing: border-box;
            
            img {
              margin: 0;
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
          .person-data-box {
            // width: 150px;
            height: 60px;
            // background-color: pink;
            display: flex;
            flex-direction: column;
            padding: 5px 0;
            box-sizing: border-box;
            .data-box-top{
                // width: 150px;
                height: 25px;
                
                // background-color: blue;
                font-size: 14px;
                display: flex;
                justify-content: start;
                .name{
                    // width: 120px;
                    font-size: 16px;
                    height: 25px;
                    margin-right: 10px;
                    // text-overflow: ellipsis;
                    // white-space: nowrap;
                    // overflow: hidden;

                }
                .lv{
                    // width: 75px;
                    height: 25px;
                }
            }
            .data-box-bottom{
                // width: 150px;
                height: 25px;
                font-size: 14px;
                // background-color: green;
                display: flex;
                justify-content: start;
            }
          }
          .isfollow-box{
              width: 80px;
              height: 30px;
              // padding: 5px;
              // box-sizing: border-box;
              background-color: orange;
            //   margin-left: 80px;
              margin-top: 15px;
            //   padding: 10px 0;
              box-sizing: border-box;
              border-radius: 20px;
              text-align: center;
              line-height: 30px;
              font-size: 14px;
              position: absolute;
              right: 10px;
          }
        }

        .li-content{
            width: 100%;
            a{
                width: 100%;
                display: block;
                margin: 0;
                padding: 0;
                img{
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    height: 300px;
                }
            }
        }

        .li-footer{
            height: 100px;
            // background-color: pink;
            display: flex;
            flex-direction: column;
            
            .li-footer-top{
                height: 40px;
                // background-color: red;
                display: flex;
                justify-content: space-between;
                .li-collect-box{
                    width: 75%;
                    // background-color: purple;
                    padding-left: 5px;
                    box-sizing: border-box;
                    display: flex;
                    .collect-img{
                      display: flex;
                      margin: 0;

                        .img-box{
                            width: 30px;
                            height: 30px;
                            background-color: white;
                            // line-height: 30px;
                            margin: 0;
                            font-size: 0;
                            margin-left: -10px;
                            border-radius: 50%;
                            padding: 5px;
                            box-sizing: border-box;
                            // z-index: 1;
                            img{
                              width: 20px;
                              height: 20px;
                              // margin-left:-10px;
                              border-radius: 50%;
                              background-size: cover;
                            }
                            &:nth-of-type(1){
                              margin-left: 0px;
                            }
                        }
                    }

                    .collect-count{
                      margin-left: 5px;
                      height: 30px;
                      line-height: 30px;
                      text-align: center;
                      font-size: 14px;
                    }
                }
                .li-footer-icons{
                    width: 50%;
                    height: 40px;
                    // background-color: yellowgreen;
                    display: flex;
                    justify-content: end;
                    margin-right: 10px;
                    >div{
                      height: 40px;
                      // margin-top: 5px;
                      margin-left: 10px;
                      padding-top: 5px;
                      font-size: 0;
                      box-sizing: border-box;
                      i{
                        height: 30px;
                        font-size: 30px;
                        line-height: 30px;
                      }
                    }
                }
            }
            .li-footer-mid{
                height: 30px;
                font-size: 20px;
                line-height: 30px;
                padding-left: 5px;
                // background-color: green;
                
            }
            .li-footer-bottom{
                height: 20px;
                // background-color: yellow;
            }
        }
      }
    }
  }
}
</style>